<template>
  <div id="details">
    <Header title="订单详情" />
    <div class="container">
      <div class="module">
        <div class="module-title">
          <span class="title-icon"></span>
          <span class="tittle-text">基本信息</span>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-title">订单号:<span>{{apply.yong_che_no}}</span></div>
        <div class="cb-item cb-item-row">
          <span>用车单位</span>
          <span>{{apply.apply_dept_name}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>用车人:{{apply.yong_che_ren}}</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">{{apply.apply_use_phone}}</span>
            <span class="color-blue">{{apply.apply_duanhao}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>联系人:{{apply.sui_xing_name}}</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">{{apply.sui_xing_phone}}</span>
            <span class="color-blue">{{apply.sui_xing_call}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span>用车类型:</span>
            <span>{{apply.apply_sx_pople}}</span>
            <!-- <span class="car-left50">中型客车<span>1</span>辆</span><span>{{apply.car_type_name}}</span>辆 -->
          </div>
          <div class="car-users">
            <span>乘车人数:</span>
            <span>{{apply.apply_man_num}}<span></span>人</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span class="start-img"></span>
            <span class="car-left14">{{apply.apply_use_address}}</span>
          </div>
          <div class="car-users">
            <span class="car-right25">{{apply.apply_use_time}}</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span class="end-img"></span>
            <span class="car-left14">{{apply.apply_destination}}</span>
          </div>
          <div class="car-users">
            <span class="car-right25">{{apply.apply_back_time}}</span>
          </div>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="send-car"></span>
          <span class="tittle-text">派车信息</span>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-item-row">
          <div class="car-users">
            <span>车牌号:</span>
            <span>{{apply.apply_car_num}}</span>
            <!-- <span class="color-green">(5座)</span> -->
          </div>
          <span>{{apply.car_type_name}}</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>驾驶员:明世隐</span>
          <div class="car-users">
            <span class="car-users-img"></span>
            <span class="color-blue car-left13">17756603950</span>
            <span class="color-blue">123456</span>
          </div>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="cost-car"></span>
          <span class="tittle-text">相关费用</span>
        </div>
        <div class="car-users">
          <span class="car-reduce"></span>
          <span class="car-num">2</span>
          <span class="car-plus"></span>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-item-row">
          <span>实际出发时间</span>
          <div class="car-users">
            <span class="car-right25">2020-04-08</span>
            <span>17:04</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>实际归队时间</span>
          <div class="car-users">
            <span class="car-right25">2020-04-08</span>
            <span>17:04</span>
          </div>
        </div>
      </div>

      <div class="content-box">
        <div class="cb-item cb-item-row">
          <span class="car-message">2020-04-08信息</span>
          <span class="car-delete"></span>
        </div>
        <div class="cb-item cb-item-row">
          <span>用车时间</span>
          <span>第一天同步出发时间</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>起止地址</span>
          <span>市政府高铁站</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>长途公里</span>
          <span>16.3km</span>
        </div>
        <div class="cb-item cb-item-row">
          <span>室内天数</span>
          <span>5天</span>
        </div>
      </div>

      <div class="module">
        <div class="module-title">
          <span class="other-car"></span>
          <span class="tittle-text">其他费用</span>
        </div>
      </div>
      <div class="content-box">
        <div class="cb-item cb-item-row">
          <div>
            <span class="hotel car-num-fee">32</span>
            <span class="fee">元</span>
          </div>
          <div>
            <span class="park car-num-fee">132</span>
            <span class="fee">元</span>
          </div>
          <div>
            <span class="transit car-num-fee">213</span>
            <span class="fee">元</span>
          </div>
          <div>
            <span class="others car-num-fee">46</span>
            <span class="fee">元</span>
          </div>
        </div>
        <div class="cb-item cb-item-row">
          <span>住宿费</span>
          <span>停车费</span>
          <span>过境费</span>
          <span>其他费用 </span>
        </div>
      </div>
    </div>

    <div class="buttom">
      <van-button @click="postData" type="primary" size="large" color="#3A73F6"
        >通过</van-button
      >
      <van-button @click="resetData" type="primary" size="large" color="#FE9729"
        >驳回</van-button
      >
    </div>
    <van-dialog
      use-slot
      title="驳回"
      v-model="show"
      show-cancel-button
      @confirm="confirmAction"
    >
      <van-field
        label-class="label-class"
        v-model="reason"
        label="驳回理由"
        placeholder="请输驳回理由"
      />
    </van-dialog>
    Page({
  </div>
</template>

<script>
import Header from "../../components/Header";
import { Dialog } from "vant";

export default {
  name: "Details",
  data() {
    return {
      show: false,
      reason: "",
      apply: {},
    };
  },
  mounted() {
    this.getData();
  },

  methods: {
    confirmAction() {
      this.$http
        .get("/carorder/auditReject", {
          applyId: this.$route.params.id,
          userId: localStorage.getItem("userId"),
          reason: this.reason,
        })
        .then((result) => {
          console.log(result);
        });
    },
    postData() {
      Dialog.confirm({
        title: "",
        message: "是否受理通过？",
      })
        .then(() => {
          this.$http
            .get("/carorder/queauditPass", {
              applyId: this.$route.params.id,
              userId: localStorage.getItem("userId"),
            })
            .then((result) => {
              console.log(result);
            });
        })
        .catch(() => {});
    },
    resetData() {
      console.log(this.show);
      this.show = true;
    },
    getData() {
      console.log(this.$route.params.id);
      this.$http
        .get("/carorder/queryApplyInfo", {
          applyId: this.$route.params.id,
        })
        .then((result) => {
          console.log(result.data);
          this.apply = result.data.apply;
        });
    },
  },
  components: {
    Header: Header,
  },
};
</script>

<style scoped>
.container {
  padding: 20px 20px 140px 20px;
}

.title-icon {
  height: 36px;
  width: 36px;
  background-image: url("./images/cart@3x.png");
}

.cost-car {
  height: 36px;
  width: 36px;
  background-image: url("./images/cost.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-reduce {
  height: 30px;
  width: 30px;
  background-image: url("./images/reduce.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 16px;
}

.car-plus {
  height: 30px;
  width: 30px;
  background-image: url("./images/plus.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 20px;
}

.send-car {
  height: 36px;
  width: 36px;
  background-image: url("./images/send-car@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-delete {
  height: 32px;
  width: 24px;
  background-image: url("./images/delete.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.other-car {
  height: 36px;
  width: 36px;
  background-image: url("./images/other.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.content-box {
  padding: 10px;
  background-color: #ffffff;
  margin-top: 10px;
  box-shadow: 0px 3px 5px 0px rgba(120, 120, 120, 0.1);
  border-radius: 6px;
  font-size: 30px;
}

.cb-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 26px;
  height: 93px;
  padding: 0 20px;
  border-bottom-color: #f2f2f2;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.cb-item-row {
  justify-content: space-between;
}

.cb-title {
  color: #333333;
  font-size: 30px;
}

.tittle-text {
  color: #333333;
  font-size: 30px;
}

.car-users-img {
  height: 28px;
  width: 22px;
  background-image: url("./images/phone@2x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-users,
.module {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module {
  padding: 12px 0;
}

.color-blue {
  color: #3c6dd1;
  padding-left: 13px;
  font-size: 24px;
}

.car-left50 {
  padding-left: 50px;
}

.start-img {
  height: 48px;
  width: 36px;
  background-image: url("./images/start@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.end-img {
  height: 48px;
  width: 36px;
  background-image: url("./images/end@3x.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.car-left14 {
  padding-left: 14px;
}

.car-right25 {
  padding-right: 25px;
}

.color-green {
  color: #31b897;
}

.car-num {
  font-size: 20px;
  margin-right: 16px;
}

.car-message {
  color: #4168ca;
  font-size: 30px;
  letter-spacing: 3px;
}

.car-num-fee {
  color: #d84847;
  font-size: 26px;
}

.fee {
  font-size: 18px;
}
.buttom {
  padding: 0 60px;
  height: 140px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.buttom .van-button--large {
  height: 40px;
  width: 100px;
  line-height: 40px;
}
.label-class {
  flex: 0.5;
}
</style>
